<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      父级:{{text}}
      <c1 ref="c1" :text="text"></c1>
    </div>
    <template id="c1">
      <div>子级:{{text}}</div>
    </template>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          text: "",
          list: [],
        },
        components: {
          c1: {
            template: "#c1",
            props: {
              text: {
                type: "",
              },
            },
            methods: {
              nok() {
                console.log(111);
                console.log(this);
              },
            },
          },
        },
        created() {
          fetch("http://127.0.0.1:3000/", { method: "get" })
            .then((response) => {
              return response.text();
            })
            .then((result) => {
              this.text = result;
            });
          this.$nextTick(() => {
            this.$refs.c1.nok();
          });
        },
      });
    </script>
  </body>
</html>
